<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
            .list-container { border: 1px solid grey ; margin: 50px ;  }
            ol { border: 1px solid red ; }
            ul { border: 1px solid blue ; }
            li { border-bottom: 1px solid deeppink ; }
            dl { border: 1px solid green ; }
            dd { border-bottom: 1px solid deeppink ; }
            dt { border-bottom: 1px solid deeppink ; }
        </style>
    </head>
    <body>

        <div class="list-container">
            <ol>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ol>
        </div>

        <div class="list-container">
            <ul>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ul>
        </div>

        <div class="list-container">
            <dl>
                <dt>电脑</dt>
                <dd>夏天打雷被雷击后的人，大脑是带电的，俗称电脑。</dd>
                <dt>电脑</dt>
                <dd>夏天打雷被雷击后的人，大脑是带电的，俗称电脑。</dd>
            </dl>
        </div>
        
    </body>
</html>